<template>
  <div class="addRecord">
    <h3 class="title">添加客户办理记录</h3>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="客户名称" prop="name">
      <el-select v-model="ruleForm.name" filterable placeholder="选择客户" remote :remote-method ="getCilents" class="input-text">
      <el-option
         v-for="item in clients"	
         :key="item.id"			
         :label="item.name"		
         :value="item.id"/>	
      </el-select>
      </el-form-item>
 

      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="账号(业务办理)" prop="count">
        <el-input v-model="ruleForm.count"></el-input>
      </el-form-item>
      <el-form-item label="业务类型" prop="type">
        <el-select v-model="ruleForm.type" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :plain="true" @click="submitForm('ruleForm')"
          >添加</el-button
        >
        <el-button type="info" :plain="true" @click="resetForm('ruleForm')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import userRequest from "../request/index";
export default {
  data() {
    var name = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请填写客户名称"));
      } else {
        return callback();
      }
    };
    var phone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请填写联系电话"));
      } else {
        return callback();
      }
    };
    var email = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请填写客户邮箱"));
      } else {
        return callback();
      }
    };
    var count = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请填写账号(业务办理)"));
      } else {
        return callback();
      }
    };
    var type = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请选择业务类型"));
      } else {
        return callback();
      }
    };
    return {
      clients: [],
      search: [],
      ruleForm: {
        name: "", //客户名称
        phone: "", //电话
        email: "", //邮箱
        count: "", //账号
        type: "", //业务类型
      },
      rules: {
        name: [{ validator: name, trigger: "blur" }],
        phone: [{ validator: phone, trigger: "blur" }],
        email: [{ validator: email, trigger: "blur" }],
        count: [{ validator: count, trigger: "blur" }],
        type: [{ validator: type, trigger: "blur" }],
      },
      // options为下拉框的数据 提供选择（相当于是定死的五条数据，让用户只能选这五种）
      options: [
        {
          value: "储蓄卡办理",
          label: "储蓄卡办理",
        },
        {
          value: "信用卡办理",
          label: "信用卡办理",
        },
        {
          value: "贷款办理",
          label: "贷款办理",
        },
        {
          value: "定期存款",
          label: "定期存款",
        },
        {
          value: "活期存款",
          label: "活期存款",
        },
      ],
    };
  },

  mounted(){
      this.getNameList();
  },

  methods: {
      getCilents(query){
        this.clients = []
        userRequest.getcustomerList({pageNo:1,pageSize:10,name:query}).then(res =>{
          if (res.data.success == true) {
                if(res.data.result.result){
                   this.clients = res.data.result.result
                }
              } 
        })
    },
      getNameList(){
          userRequest.getNameList().then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            const result = res.data.result;
            this.nameList = result;
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
      },

    // 添加客户办理记录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          userRequest
            .addRecord({
              name: this.ruleForm.name,
              phone: this.ruleForm.phone,
              email: this.ruleForm.email,
              count: this.ruleForm.count,
              type: this.ruleForm.type,
            })
            .then((res) => {
              if (res.data.success == true) {
                this.$message.success("添加成功!");
                this.resetForm();
              } else {
                this.$message.error(res.data.message);
              }
            });
        } else {
          this.$message.error("请检查信息是否完整！");
          return false;
        }
      });
    },
    // 清空表单
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },

  created() {},
};
</script>

<style lang="scss" scoped>
.addRecord {
  overflow: hidden;

  ::v-deep .title {
    text-align: center;
    font-size: 20px;
  }
  ::v-deep .demo-ruleForm {
    width: 600px;
    margin: 30px auto;
  }
  ::v-deep .el-input__inner {
    height: 45px;
    font-size: 16px;
  }
  ::v-deep .el-form-item__label {
    font-size: 16px;
    position: relative;
    top: 10px;
  }
  ::v-deep .el-form-item__content {
    margin-top: 10px;
    height: 50px;
    display: flex;
  }
  ::v-deep .el-form-item__error {
    font-size: 16px;
  }

  ::v-deep .el-select-dropdown__item {
    display: flex;
    justify-content: center;
  }
  ::v-deep .el-radio-group {
    width: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 11px;
  }
}
</style>